<template>
	<view class="paytype">
		<view class="paytype-head">
			<view class="font-ffffff font16">{{dataobj.status=='centel'?'已取消':dataobj.pay_status==1?'支付成功':'未支付'}}</view>
		</view>
		<view class="paytype-info">
			<view class="font15 font-1e1e1e">收件人信息</view>
			<view v-if="dataobj.addr_name">
				<view class="font13" style="margin: 30rpx 0 10rpx 0;">
					<text class="font-1e1e1e">{{dataobj.addr_name}}</text>
					<text class="font-969696">{{dataobj.mobile}}</text>
				</view>
				<view class="font-1e1e1e font13">{{dataobj.province}}{{dataobj.city}}{{dataobj.area}}{{dataobj.address}}
				</view>
			</view>
			<view v-else style="margin: 30rpx 0 10rpx 0;" class="addr_no font-1e1e1e font14">暂无收货地址</view>
		</view>
		<view class="pay-border" style="margin-top: 158rpx;"></view>
		<view class="pay-info">
			<view class="info-bos flex-row-between">
				<image :src="imgPath+dataobj.goods_info.images" mode=""></image>
				<view class="info-box">
					<view class="font12 font-1e1e1e mutiple-ellipsis mutiple-ellipsis-2" style="width: 350rpx;">
						{{dataobj.goods_info.name}}.
					</view>
					<view class="font12 flex-column-between">
						<view>{{dataobj.goods_info.score}}积分+￥{{dataobj.goods_info.price}}</view>
						<view class="font-969696 tr">x{{dataobj.goods_number}}</view>
					</view>
				</view>
			</view>
			<!-- v-if="dataobj.pay_time" -->
			<view v-if="dataobj.pay_status==1" @click="opentk" class="font-969696 font13 tr" style="margin-top: 20rpx;">申请退款</view>
		</view>
		<view class="pay-border"></view>
		<view class="pay-bottom">
			<view class="flex-row-between font13">
				<view class="font-1e1e1e">下单时间</view>
				<view class="font-b4b4b4">{{dataobj.createtime}}</view>
			</view>
			<view class="flex-row-between font13" style="margin-top: 50rpx;">
				<view class="font-1e1e1e">订单编号</view>
				<view class="font-b4b4b4">
					<text>{{dataobj.order_no}}</text>
					<!-- <text class="font-238bff">复制</text> -->
				</view>
			</view>
			<view class="flex-row-between font13" style="margin-top: 50rpx;">
				<view class="font-1e1e1e">商品总价</view>
				<view class="font-b4b4b4">
					{{dataobj.all_score}}积分+￥{{dataobj.price}}
				</view>
			</view>
			<view class="flex-row-between font13" style="margin-top: 50rpx;">
				<view class="font-1e1e1e">支付时间</view>
				<view class="font-b4b4b4">{{dataobj.pay_time?dataobj.pay_time:'-'}}</view>
			</view>
		</view>
		<view class="pay-border"></view>
		<view class="flex-row-between" v-if="dataobj.pay_status==2">
			<view></view>
			<view class="bnt" @click="goNext">去支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				dataobj: {},
				imgPath: this.$Config.http_static, // 图片头
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getInfo()
		},
		methods: {
			getInfo() {
				this.$Http({
					url: 'getOrderInfo',
					token: true,
					data: {
						id: this.id
					}
				}).then(res => {
					if (res.code == 1) {
						res.data.all_score = this.$base.numAdd(res.data.score, res.data.crs_score)
						this.dataobj = res.data
					}
				});
			},
			goNext(url) {
				this.$Router.push('/pages/integral/ferry?id=' + this.id)
			},
			opentk() {
				uni.showModal({
					title: '申请退款',
					confirmText: '拨打',
					cancelText: '取消',
					content: '尊敬的客人你好！申请退款请在工作时间：周一至周五 09：00-18：00联系客服处理，客服电话4006262008',
					success: function(res) {
						uni.makePhoneCall({
							phoneNumber: '4006262008'
						});
					}
				});
			},
		}
	}
</script>

<style lang="less">
	.paytype {
		position: relative;
		background-color: #ffffff;

		.paytype-head {
			width: 750rpx;
			height: 200rpx;
			background-image: linear-gradient(20deg, rgba(255, 80, 57, 1) 0%, #ff9386 100%);
			padding: 45rpx 0 0 36rpx;
		}

		.paytype-info {
			width: 710rpx;
			background-color: #ffffff;
			box-shadow: 0px 0px 30rpx 0px rgba(113, 113, 113, 0.1);
			border-radius: 10rpx;
			padding: 28rpx 25rpx;
			position: absolute;
			top: 116rpx;
			left: 20rpx;
		}

		.pay-border {
			height: 20rpx;
			width: 750rpx;
			background-color: #fafafa;
		}

		.pay-info {
			padding: 25rpx;

			.info-bos {
				width: 700rpx;
				height: 116rpx;

				image {
					height: 116rpx;
					width: 116rpx;
					border: 1rpx #fafafa solid;
					border-radius: 10rpx;
				}

				.info-box {
					width: 584rpx;
					height: 116rpx;
					padding-left: 28rpx;
					display: flex;
					padding: 20rpx 0 30rpx 20rpx;
					justify-content: space-between;

					view {
						line-height: 36rpx;
					}
				}
			}
		}

		.pay-bottom {
			padding: 30rpx 25rpx;
			width: 750rpx;
		}

		.bnt {
			width: 150rpx;
			height: 50rpx;
			border-radius: 25rpx;
			border: solid 2rpx #c8c8c8;
			margin-right: 20px;
			color: #646464;
			font-size: 24rpx;
			line-height: 50rpx;
			text-align: center;
			margin-top: 30rpx;
		}
	}
</style>